<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" />
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="syalert/syalert.min.css" />
<script src="syalert/syalert.min.js"></script>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>密码编辑</title>
</head>
<body class="setbackgroundcolor">
<div class="textcontrol">
    <h1 class="setfont" style="text-align: center">Edit</h1>
<p class="setfont">password:<input id ="password"  type="password" placeholder="请输入密码" /></p>
<p><label class="setfont">repassword:</label><input id="repassword" type="password"  placeholder="请重新输入密码" /></p>
<div style="text-align: center">
    <button class="myBtn" id="edit">完成</button>
</div>

</div>
<div class="sy-alert animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="confirm" sy-mask="true" id="alert1">
    <div class="sy-title setfont">Yeah</div>
    <div class="sy-content">你的密码已成功更改！</div>
    <div class="sy-btn">
        <button onClick="syalert.syhide('alert1')">好的</button>
        <button onClick="syalert.syhide('alert1')">取消</button>
    </div>
</div>
<div class="sy-alert sy-alert-tips animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="tips" sy-mask="false" id="alert2">
    <div class="sy-content">密码不能空</div>
</div>
<div class="sy-alert sy-alert-tips animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="tips" sy-mask="false" id="alert3">
    <div class="sy-content">密码不一致</div>
</div>
<div class="sy-alert sy-alert-tips animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="tips" sy-mask="false" id="alert4">
<div class="sy-content">密码强度差，最少6位</div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $(document).ready(function () {
      $("#edit").click(function () {
          if($("#password").val()==""){

              syalert.syopen("alert2")
          }else if(! (/^[a-zA-Z0-9]{6,}$/.test($("#password").val()))){
              syalert.syopen("alert4")
          }
          else if($("#password").val()!==$("#repassword").val()){

              syalert.syopen("alert3")
          }else{
              var obj = JSON.parse(personinfo.query("213171645"));
              alert(obj['name']);
              alert(obj["eCardNumber"]);
              alert(obj["gender"]);
              alert(obj["state"]);
              var password = $("#password").val();
              alert(password);
              login.update(obj["name"],password,obj["eCardNumber"],obj["gender"],obj["state"]);


              syalert.syopen("alert1")}


      })


    })

</script>
<style>
    .setfont{
        font-family: Lobster;


    }
    .textcontrol{
        text-align: right;
       position: absolute;
        width: 15%;
        top: 15%;
        left: 30%;
        margin: 0 auto;
        padding-left: 10%;
        padding-bottom: 6%;
        padding-right: 7%;
        padding-top: 3%;
        background: url("../html/image/888.jpg") no-repeat 1px center;
        border: 10px solid black;
    }
    .myBtn{
        visibility:visible;
        border:none;
        outline: none;
        margin: 2.5rem 0 0;
        width: 50%;
        height: 3rem;
        border-radius: 3rem;
        background: linear-gradient(90deg,rgb(181, 154, 254),rgb(245, 189, 253) );
        box-shadow: 0 0 8px rgb(181, 154, 254);
        cursor: pointer;
        color:white;

    }
    .setbackgroundcolor{

        background: url("./image/800.jpg")  center;

    }
    </style>

</body>
</html>
